<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>v-if,v-show,v-for</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	</head>

	<body>

		<div id="root">
          <div>
          	 <input v-model="inputValue"/>
          	<button @click="handlerSubmit">提交</button>
          	
          </div>
			<!--<ul>
				<li v-for="(item,index) of list" :key="index">{{item}}</li>
			</ul>-->
			
			<ul>
		        <!--
                	作者：offline
                	时间：2018-12-01
                	描述：父组件向子组件传递参数， 将 item 和 index 传到 子组件里面 ，并用@delete监听 子组件的删除时间
                	，如果监听到了删除时间，就会执行 父组件的 handleDelete 函数。
                -->
				<todo-item-global v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handleDelete"></todo-item-global>
			</ul>
			
		</div>
		
		<script>
			
			//定义一个全局组件 ，vue 中的 每一个组件 都是一个vue 实例
			Vue.component('todo-item-global',{
				props:['content','index'],      //可以接收 到父组件传过来的 item 和 index 
				template:"<li @click='handleClick'>{{content}}（单机我，可以删除哦）</li>",  //绑定一个点击时间
				methods:{
		           handleClick:function(){
		           	this.$emit('delete',this.index);   //发布一个删除事件，并将index传回
		           }
				}
			})
 			
			//局部组件，
			var TodoItem = {
				template:'<li>item</li>'
			}
			
			
			new Vue({
				el: "#root",
				components:{
					'todo-item': TodoItem
				},
				data: {
				inputValue:'hello',	
				list:[] 
				},
				methods: {
				  handlerSubmit:function(){
				  	if(this.inputValue){
				  	this.list.push(this.inputValue);
				  	this.inputValue='';
				  }
				 },
				 handleDelete:function(index){
				 	this.list.splice(index,1)
				 }
				}
			});
		</script>

	</body>

</html>